import React, { useState } from 'react';

type IProps = {
    /** color to use for the background */
    color?: string;
    /** standard children prop: accepts any valid React Node */
    children: React.ReactNode;
    /** callback function passed to the onClick handler*/
    onClick: () => void;
};

type IUser = {
    email: string;
    id: string;
};

const Button: React.FC<IProps> = ({ children, color = 'blue', onClick }) => {
    // `value` is inferred as a string
    // `setValue` is inferred as (newValue: string) => void
    const [value, setValue] = useState('');

    // the generic is the < >
    // the union is the User | null
    // together, TypeScript knows, "Ah, user can be User or null".
    const [user, setUser] = useState<IUser | null>(null);
    return (
        <div>
            <button style={{ backgroundColor: color }} onClick={onClick}>
                {children}
            </button>
        </div>
    );
};

export default Button;
